<template>
    <div class="shop">
        <el-button size="mini" type="primary" @click="exportTaxData">导出数据</el-button>
        <el-button size="mini" type="primary" @click="searchTaxData" style="float:right;">搜索</el-button>

        <el-input style="width:164px;float:right;margin-left:12px;" v-model="keywords" size="mini" placeholder="输入提现用户手机号搜索"></el-input>
        <el-select size="mini" v-model="deduct_status" style="float:right;width:120px;" placeholder="状态">
            <el-option label="全部" value="4"></el-option>
            <el-option label="未退税" value="0"></el-option>
            <el-option label="退款申请中" value="1"></el-option>
            <el-option label="已退税打款" value="2"></el-option>
            <el-option label="已取消" value="3"></el-option>
        </el-select>

            <el-table
      :data="tableData"
      style="width:100%;margin:20px;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
    <el-table-column label="提现时间" prop="created_at"></el-table-column>
    <el-table-column label="提现用户账号" prop="username"></el-table-column>
    <el-table-column label="提现金额(元)" >
        <template slot-scope="scope">
            <p v-if="scope.row.money">¥ {{scope.row.money}}</p>
            <p v-else>---</p>
        </template>
    </el-table-column>
    <el-table-column label="代扣税比例" prop="tax_rate">
        <template slot-scope="scope">
            <p>{{scope.row.tax_rate}}%</p>
        </template>
    </el-table-column>
    <el-table-column label="代扣税费">
        <template slot-scope="scope">
            <p v-if="scope.row.tax_fee">¥ {{scope.row.tax_fee}}</p>
            <p v-else>---</p>
        </template>
    </el-table-column>
    <el-table-column label="退税状态">
        <template slot-scope="scope">
            <p v-if="scope.row.deduct_status == 0">未退税</p>
            <p v-if="scope.row.deduct_status == 1">退税申请中</p>
            <p v-if="scope.row.deduct_status == 2">已退税打款</p>
            <p v-if="scope.row.deduct_status == 3" style="color:red;">已过期</p>
        </template>
    </el-table-column>
    </el-table>
          <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
</template>

<script>
// import {taxAdminTaxRecord} from '@/api/finance'
import {taxPageList,taxUpdate,taxAdd,taxDetail,taxDelete,taxExport,taxDeductPageList} from '@/api/finance'
import { API_BASE_URL } from "@/config";
export default {
    data () {
       return {
         is_export:0,
         keywords:'',
         deduct_status:'',
         export:0,
         tableData:[],
         page:1,
         size:20,
         total:0,
         pageNum:1,
         pageSize:20,
       }
    },
    created () {
        this.gettaxAdminTaxRecordData()
    },
    methods:{
        //导出数据
       exportTaxData() {
         this.export = 1;
         this.gettaxAdminTaxRecordData()
       },
       //搜索
       searchTaxData () {
         this.gettaxAdminTaxRecordData()
       },
       //换页
       pageChange (page) {
           this.pageNum = page
           this.gettaxAdminTaxRecordData()
       },

       //获取代扣税列表详情
       async gettaxAdminTaxRecordData(){
           if(this.deduct_status  == 4){
               this.deduct_status = ''
           }
         var form = {
             deduct_status:this.deduct_status,
             keywords:this.keywords,
             pageNum:this.pageNum,
              pageSize:this.pageSize,
             export:this.export
         }
         let res = await taxPageList(form)
         if(res.code === 200){
            if(this.export == 1){
        this.export = 0
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
            }else{
            this.tableData = res.data.data
            this.total  = res.data.total
            }
         }else {
            this.$message.error(res.message)
         }
       },
       tc() {
      return "text-align:center; color:#333333; font-size:12px;";
       },
       tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
       },
    }
}
</script>

<style lang="scss" scoped>
.shop {
    padding: 20px;
    .pagination {
        float: right;
    }
}
</style>
